<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css2/common.css" />
    <link rel="stylesheet" href="css2/pursue.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="icon" href="img/logo1.png" type="image/x-icon" />
    <title>提问板</title>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <div id="user"></div>

      <div class="title">我的博客系统</div>

      <div class="space"></div>

      <a href="myblog_lists.html">我的博客</a>
      <a href="blog_login.html" onclick="remove()">退出登录</a>
    </div>
    <div class="container">
      <div class="container-left">
        <div class="card">
          <form action="#">
            <h1>提问</h1>
            <div class="row">
              谁：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                type="text"
                id="c1"
              />
            </div>
            <div class="row">想对谁：<input type="text" id="c2" /></div>
            <div class="row">
              问：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                type="text"
                id="c3"
              />
            </div>
            <div class="print">
              <div class="s">
                <input type="button" value="发送" id="go" onclick="send()" />
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="container-right">
        <div class="article">
          <h1 style="font-size: 50px">板</h1>
          <div id="a"></div>
        </div>
      </div>
    </div>
    <script>
      function waterFall(boxes) {
        // 将a下的全部box取出来
        var oParent = jQuery("#a");
        // 计算显示的列数（页面的宽/box的宽）
        var oBoxWeight = boxes[0].outerWidth(); // console.log(oBoxWeight);
        //333 + 内边距 10 * 2 + 边框 1 * 2 + （填充）15 == 370
        var cols = Math.floor(jQuery("#a").width() / oBoxWeight);
        // 设置a的宽度
        oParent.css("width", cols * oBoxWeight + "px");
        oParent.css("margin", "0 auto");

        // 存放第该列（位置正确摆放的多个div高度）的高度的数组
        // 第一次，则是第一行每个div的高度
        var hArr = [];
        for (var i = 0; i < boxes.length; i++) {
          if (i < cols) {
            hArr.push(boxes[i].outerHeight());
          } else {
            var minH = Math.min.apply(null, hArr); //top
            var index = getMinhIndex(hArr, minH);
            boxes[i].attr(
              "style",
              "position: absolute; top: " +
                minH +
                "px; left: " +
                oBoxWeight * index +
                "px;"
            );
            //处理盒子重叠
            hArr[index] += boxes[i].outerHeight();
          }
        }
        // left -> 左边三个div的宽，top-> 最小高
      }
      function getMinhIndex(arr, val) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            return i;
          }
        }
      }
      function remove() {
        location.href = "/blog_login.html";
      }

      jQuery(".title").text("小马");
      jQuery("#user").css(
        "background-image",
        "url(" + "img/headurl.jpeg" + ")"
      );
      var boxArray = [];
      var count = 15;
      //body就是数组
      for (i = 0; i < count; i++) {
        var aBox = buildBox(
          generateRandomString(Math.floor(Math.random() * 10) + 1),
          generateRandomString(Math.floor(Math.random() * 10) + 1),
          generateRandomString(Math.floor(Math.random() * 10) + 1),
          "img/avatar.png",
          "某人",
          "2023-12-6 12:12:12"
        );
        boxArray.push(aBox);
      }
      waterFall(boxArray);
      function buildBox(text1, text2, text3, img, name, time) {
        var result =
          "<br/><h2>" + text1 + "想对" + text2 + "问“" + text3 + "”</h2>";
        var aB = jQuery("<div></div>");
        aB.attr("class", "B");
        aB.append(result);

        var aTleft = jQuery("<div></div>");
        aTleft.attr("class", "Tleft");
        aTleft.css("background-image", "url(" + img + ")");

        var aTright = jQuery("<div></div>");
        aTright.attr("class", "Tright");
        aTright.append("<h4>" + name + "：</h4> <h4>" + time + "</h4>");
        var aT = jQuery("<div></div>");
        aT.attr("class", "T");
        aT.append(aTleft);
        aT.append(aTright);
        var aPic = jQuery("<div></div>");
        aPic.attr("class", "pic");
        aPic.append(aT);
        aPic.append(aB);
        var aBox = jQuery("<div></div>");
        aBox.attr("class", "box");
        aPic.appendTo(aBox);
        aBox.appendTo(jQuery("#a"));
        return aBox;
      }
      function send() {
        var text1 = jQuery("#c1");
        var text2 = jQuery("#c2");
        var text3 = jQuery("#c3");
        if (text1.val().trim() == "") {
          alert("请输入是谁！");
          text1.focus();
          return;
        }
        if (text2.val().trim() == "") {
          alert("请输入想对谁说！");
          text2.focus();
          return;
        }
        if (text3.val().trim() == "") {
          alert("请输入想说什么！");
          text3.focus();
          return;
        }
        var aBox = buildBox(
          text1.val(),
          text2.val(),
          text3.val(),
          "img/headurl.jpeg",
          "小马",
          "2023-12-12 12:12:12"
        );
        boxArray.unshift(aBox);
        jQuery("#a").empty();
        for (i = 0; i < boxArray.length; i++) {
          boxArray[i].appendTo(jQuery("#a"));
        }
        waterFall(boxArray);
        text1.val("");
        text2.val("");
        text3.val("");
      }

      function generateRandomString(length) {
        var result = "";
        var characters =
          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        var charactersLength = characters.length;
        for (var i = 0; i < length; i++) {
          result += characters.charAt(
            Math.floor(Math.random() * charactersLength)
          );
        }
        return result;
      }
    </script>
  </body>
</html>
